<template>
  <div id='shop'>
    <div class="shop-detail">
      <div class="shop-head">
        <div v-if='shop.obj.image_path' class="head-bgi" :style="'background-image: url(https://fuss10.elemecdn.com/' + shop.obj.image_path.substr(0,1) + '/' + shop.obj.image_path.substr(1,2) + '/' + shop.obj.image_path.substr(3) + (shop.obj.image_path.substr(-3) === 'peg'? '.jpeg' : '.png' ) + '?imageMogr/format/webp/thumbnail/!40p/blur/50x40/);'">
        </div>
        <nav class="head-nav">
          <router-link to='/' ><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-left"><svg viewBox="0 0 20 32" id="arrow-left" width="100%" height="100%"><path fill="#fff" d="M16.552 5.633l-2.044-2.044L2.243 15.854l12.265 12.557 2.044-2.044L6.331 15.854z"></path></svg></use></svg></router-link>
        </nav>
        <div class="head-main" @click='detail'>
          <img v-if='shop.obj.image_path' class="head-logo" :src="'https://fuss10.elemecdn.com/' + shop.obj.image_path.substr(0,1) + '/' + shop.obj.image_path.substr(1,2) + '/' + shop.obj.image_path.substr(3) + (shop.obj.image_path.substr(-3) === 'peg'? '.jpeg' : '.png' ) + '?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/'" alt="">
          <div class="shop-header-content">
            <h2 class="shop-header-shopName">{{shop.obj.name}}</h2> 
            <p class="shop-header-delivery">
              <span class="shop-header-deliveryItem">商家配送/</span> 
              <span class="shop-header-deliveryItem">49分钟送达/</span> 
              <span v-if='shop.obj.piecewise_agent_fee' class="shop-header-deliveryItem">{{shop.obj.piecewise_agent_fee.tips}}</span>
            </p> 
            <div class="shop-header-notice">
              <span>公告：</span> 
              <span>{{shop.obj.promotion_info}}</span>
            </div>
          </div> 
          <svg class="shop-header-detailIcon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"><svg viewBox="0 0 547 987" id="arrow-right" width="100%" height="100%"><path d="M0 931.973l51.2 54.613 494.933-494.933L51.2.133 0 51.333l440.32 440.32L0 931.973z"></path></svg></use></svg>
          </div>
        <div class="shop-header-activities">
          <div class="activity-container" :key='index' v-for='(it, index) in shop.obj.activities' v-show='index<1' >
            <span class="activity-activityIcon" :style="{backgroundColor:'#'+it.icon_color}" >{{it.icon_name}}</span> 
            <span v-if='it.tips' class="activity-description">{{it.tips}}</span>
          </div> 
          <div v-if='shop.obj.activities' class="shop-header-activityCount">{{shop.obj.activities.length+1}}个活动</div>
        </div>
      </div>
    </div>
    <div class="shop-tab">
      <div class="shop-tabbar isact" @click=" page = 'Menuview' " ><span class="tab-title">商品</span></div>
      <div class="shop-tabbar" @click=" page = 'Pingjia' " ><span class="tab-title">评价</span></div>
    </div>
    <componet :is='page' ></componet>
    <transition name='fade' >
      <Shopdetail v-show='ishow' ></Shopdetail>
    </transition>
  </div>
</template>

<script>
  import axios from 'axios'
  import { mapState } from 'vuex'
  import Menuview from './Menuview'
  import Pingjia from './Pingjia'
  import Shopdetail from './Shopdetail'
  export default {
    name: 'shop',
    data () {
      return {
        page: 'Menuview',
        pagelist: ['Menuview', 'Pingjia']
      }
    },
    components: { Menuview, Pingjia, Shopdetail },
    methods: {
      detail: function () {
        this.$store.commit('SHOWDETAIL')
      }
    },
    computed: {
      ...mapState(['shop', 'ishow', 'position'])
    },
    mounted () {
      var id = this.$route.query.id
      var that = this
      var positi = sessionStorage.getItem('id')
      if (positi) {
        var lng = (JSON.parse(positi)).lng
        var lat = (JSON.parse(positi)).lat
        getdata(lng, lat, that)
      }
      this.$watch('position', function (newVal, oldVal) {
        var lng = newVal.lng
        var lat = newVal.lat
        getdata(lng, lat, that)
      })
      // 商家介绍详情Ajax
      function getdata (lng, lat, that) {
        axios.get('http://localhost:3000/shop?', {
          params: {
            id: id,
            latitude: lat,
            longitude: lng
          }
        }).then(res => {
          var objdata = res.data
          that.$store.commit('SHOP', objdata)
          // console.log(objdata)
        })
      }
      // 商家menu菜单详情Ajax
      axios.get('http://localhost:3000/shopmenu?', {
        params: {
          id: id
        }
      }).then(res => {
        var arrdata = res.data
        that.$store.commit('SHOPMENU', arrdata)
        // console.log(arrdata)
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../static/hotcss/px2rem';
  #shop{
    .shop-detail{
      height: px2rem(132);
      width: 100%;
      .shop-head{
        position: relative;
        padding-bottom: px2rem(30);
        color: #fff;
        .head-bgi{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #3190e8;
          background-size: cover;
          background-repeat: no-repeat;
        }
        .head-nav{
          box-sizing: border-box;
          position: relative;
          padding: px2rem(4) px2rem(10);
          height: px2rem(35.5);
          a{
            display: inline-block;
            svg{
              width: px2rem(25);
              height: px2rem(25);
            }
          }
        }
        .head-main{
          position: relative;
          display: flex;
          img{
            width: px2rem(64);
            height: px2rem(64);
            border: 1px solid #fff;
            margin: 0 px2rem(10);
          }
          .shop-header-content{
            flex: 1;
            display: block;
            width: 0;
            padding-right: px2rem(5);
            .shop-header-shopName{
              margin: 0;
              font-size: px2rem(20);
              line-height: px2rem(21);
              font-weight: 700;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .shop-header-delivery{
              white-space: nowrap;
              height: px2rem(25);
              line-height: px2rem(25);
              .shop-header-deliveryItem{
                font-size: px2rem(11);
              }
            }
            .shop-header-notice{
              height: px2rem(20);
              line-height: px2rem(20);
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: px2rem(11);
            }
          }
          .shop-header-detailIcon{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: px2rem(5);
            height: px2rem(12.5);
            width: px2rem(25);
            fill: #fff;
          }
        }
        .shop-header-activities{
          position: absolute;
          left: px2rem(10);
          right: px2rem(13);
          bottom: px2rem(5);
          .activity-container{
            line-height: px2rem(16);
            display: flex;
            font-size: px2rem(10);
            .activity-activityIcon{
              margin-right: px2rem(5);
              font-style: normal;
              height: px2rem(14);
              line-height: px2rem(14);
              display: inline-block;
              box-sizing: border-box;
              text-align: center;
              border: 1px solid;
              border-radius: px2rem(1);
            }
            .activity-description{
              flex: 1;
              display: block;
              width: 0;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .shop-header-activityCount{
            position: absolute;
            top: 0;
            right: 0;
            font-size: px2rem(12);
          }
        }
      }
    }
    .shop-tab{
      line-height: px2rem(45.5);
      display: flex;
      background-color: #fff;
      .shop-tabbar{
        position: relative;
        flex: 1;
        display: block;
        width: 0;
        text-align: center;
        color: #666;
        border-bottom: 1px solid #ddd;
        .tab-title{
          
        }
        // :after{
        //   content: "";
        //   position: absolute;
        //   bottom: px2rem(-6);
        //   left: px2rem(-2.5);
        //   right: px2rem(-2.5);
        //   height: px2rem(2);
        //   background-color: #3190e8;
        //   border-radius: px2rem(2);
        // }
      }
      .isact{
        color: #3190e8;
      }
    }
    .menuview{

    }
  }

  .fade-enter-active {
            animation: big-in .5s;
        }

  .fade-leave-active {
      animation: big-out .5s;
  }

  @keyframes big-in {
      0% {
        transform: translateX(750px);
      }
      100% {
        transform: translateX(0);
      }
  }

  @keyframes big-out {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(750px);
      }
  }
  
</style>